<template>
  <div class="home_warp">
    <h1>Home组件</h1>
    <hr />
    <Mycon>
      <template #header>
        <h3>这是一首诗</h3>
      </template>
      <!-- obj相当于形参可以写scope -->
      <template #main="obj">
        <p>啊 大海 全是水</p>
        <p>啊 大海 全是水</p>
        <p>啊 大海 全是水</p>
        <p>啊 大海 全是水</p>
        <p>{{ (dataList = obj) }}</p>
      </template>
      <template #footer>
        <h2>作者:李迎浩</h2>
      </template>
    </Mycon>
    <div class="box" style="display: none">
      <Left>
        <!-- template介绍 他是一个虚拟的标签，只起到包裹性作用 ，不会渲染实质性的html元素-->
        <!-- 
          1.如果将内容填充到 指定名称中，需要使用v-slot :这个指令
          2.v-slot:后面插槽的名字
          3.v-slot:指令不能直接用在元素身上，必须用在temp拉尔标签上
          v-slot 他的简写是:#
         -->
        <template v-slot:default>
          <p>大家好 我现在要使用插槽</p>
        </template>
        <template #defas> <span>你好</span> </template>
      </Left>
    </div>
  </div>
</template>

<script>
import Left from "./Left.vue";
import Right from "./Right.vue";
import Mycon from "@/components/Mycom.vue";
export default {
  components: {
    Left,
    Right,
    Mycon,
  },
  data() {
    return {
      dataList: {},
    };
  },
};
</script>

<style lang='scss' scoped>
.home_warp {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>